window.onload = function() {
    var todoButton = document.querySelector(".todo");
    var notepad = document.querySelector(".notepad");
    var management_buttons = document.querySelector(".management_buttons");
    var things_wrap = document.querySelector(".things_wrap");
    var temNode = document.querySelector(".things_item");
    var tem = temNode.outerHTML;
    var things_itmes = document.getElementsByClassName("things_item");
    var nudone_total_num = document.querySelector(".nudone_total_num")
    var todo_list = document.querySelector("#todo_list");
    var notepad_content = document.querySelector("#notepad_content");



    var thingsList = [];


    function initList() {
        thingsList = JSON.parse(localStorage.getItem('myData'))
        nudone_total_num.innerText = `剩余${unDoneList(thingsList).length}条未完成`
    }
    initList();
    todoButton.onclick = function() {
        notepad.setAttribute("class", "notepad");
        this.setAttribute("class", "todoButton active")
        todo_list.style.display = "block";
        notepad_content.style.display = "none";
    }
    notepad.onclick = function() {
        todoButton.setAttribute("class", "todoButton");
        this.setAttribute("class", "todoButton active")
        notepad_content.style.display = "block";
        todo_list.style.display = "none";

    }

    var input_thing = document.querySelector("#input_thing");
    var add_button = document.querySelector("#add_thing");
    add_button.onclick = function() {
        insertData()
    }

    function insertData() {
        if (input_thing.value) {
            var data = input_thing.value;
            var thing_id = thingsList.length ? thingsList[thingsList.length - 1].id + 1 : 0;
            var obj = {
                done: false,
                data: data,
                id: thing_id
            }
            thingsList.push(obj)
            input_thing.value = "";
            addData(obj)
            saveLocalStorage(thingsList)
            showIsNull(thingsList)
            nudone_total_num.innerText = `剩余${unDoneList(thingsList).length}条未完成`
        } else {
            alert("事项不能为空！")
        }
    }

    function initData(list) {
        for (let i = 0; i < things_itmes.length; i++) {
            things_wrap.removeChild(things_itmes[i])
        }
        for (let i = 0; i < list.length; i++) {
            addData(list[i])
        }
    }
    initData(thingsList);

    function addData(obj) {
        var item = document.createElement("div");
        var content_warp = document.createElement("div");
        var input_check = document.createElement("input");
        var content_text = document.createElement("div");
        var delete_div = document.createElement("div");
        input_check.setAttribute("type", "checkbox");
        content_text.setAttribute("class", "things_content");
        content_warp.setAttribute("class", "content_left");
        item.setAttribute("class", "things_item")
        content_text.innerText = obj.data;
        delete_div.setAttribute("class", "delete_item");
        delete_div.setAttribute("data-id", obj.id)
        input_check.setAttribute("data-id", obj.id)
        delete_div.innerText = "删除";
        content_warp.appendChild(input_check);
        content_warp.appendChild(content_text);
        item.appendChild(content_warp);
        item.appendChild(delete_div);
        things_wrap.insertBefore(item, management_buttons)
    }


    things_wrap.addEventListener("click", function(e) {
        var event = window.event || e;
        var target = event.target || event.srcElement;
        if (target.classList[0] === "delete_item") {
            var id = target.getAttribute("data-id")
            var n = thingsList.findIndex((value, index, arr) => {
                return value.id == id
            })
            target.parentNode.parentNode.removeChild(target.parentNode)
            thingsList.splice(n, 1);
            showIsNull(thingsList)
            saveLocalStorage(thingsList)
            nudone_total_num.innerText = `剩余${unDoneList(thingsList).length}条未完成`
        }
    })


    function showIsNull(list) {
        if (list.length == 0) {
            document.querySelector(".isnull").style.display = "block"
        } else {
            document.querySelector(".isnull").style.display = "none"
        }
    }
    showIsNull(thingsList)

    function saveLocalStorage(list) {
        localStorage.setItem("myData", JSON.stringify(list))
    }

    things_wrap.addEventListener("click", function(e) {
        var event = window.event || e;
        var target = event.target || event.srcElement;
        if (target.nodeName.toLowerCase() == "input") {
            if (target.checked) {
                thingsList[target.getAttribute("data-id")].done = true
                target.parentNode.parentNode.setAttribute("class", "things_item isdone")
            } else {
                thingsList[target.getAttribute("data-id")].done = false
                target.parentNode.parentNode.setAttribute("class", "things_item")
            }
            nudone_total_num.innerText = `剩余${unDoneList(thingsList).length}条未完成`
        }
    })



    input_thing.addEventListener("focus", function(e) {
        document.onkeydown = function(e) {
            var event = window.event || e
            if (event.keyCode == 13) {
                insertData()
            }
        }
    })

    input_thing.addEventListener("blur", function() {
        document.onkeydown = null;
    })

    function unDoneList(list) {
        return list.filter(i => !i.done)
    }




}